<template>
  <div class="top-card">
    <div class="card" v-for="item in colorArr" :key="item" :style="{ backgroundColor: item }">
      <div id="top">
        <svg
          t="1696582701905"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4026"
          width="16"
          height="16"
        >
          <path
            d="M920.528912 444.49616l-340.111125-340.114737a135.932464 135.932464 0 0 0-96.155899-39.758503L200.418112 64.662657h-0.018063C125.275769 64.662657 64.301413 125.40943 64.301413 200.548159v283.673992a136.091412 136.091412 0 0 0 39.881326 96.199248l340.230335 340.241173a136.022775 136.022775 0 0 0 192.369598 0l283.74624-283.76069c53.128139-53.131752 53.128139-139.277583 0-192.405722z m-45.209673 147.192436l-283.746241 283.760691a72.064544 72.064544 0 0 1-101.924964 0l-340.212273-340.241173A72.187367 72.187367 0 0 1 128.241582 484.218538V200.548159A72.021195 72.021195 0 0 1 200.396437 128.602826l283.843776-0.039737a71.887535 71.887535 0 0 1 50.935389 21.053294l340.114737 340.1039a72.104281 72.104281 0 0 1 0.0289 101.968313z"
            fill="#ffffff"
            p-id="4027"
          ></path>
          <path
            d="M384.002258 255.999097c-70.69543 0-128.003161 57.307731-128.003161 128.003161S313.306828 511.998194 384.002258 511.998194s127.999548-57.307731 127.999548-127.999549S454.690463 255.999097 384.002258 255.999097z m45.296371 173.29592a64.059379 64.059379 0 1 1 18.759396-45.292759 63.640337 63.640337 0 0 1-18.763008 45.292759z"
            fill="#ffffff"
            p-id="4028"
          ></path>
        </svg>
        <span>View Detail</span>
      </div>
      <div id="bottom">
        <h2>Overall Sate</h2>
        <p>1234</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const colorArr = [
  'rgba(30, 163, 254, 0.9)',
  'rgba(255, 132, 52, 0.8)',
  'rgba(96, 67, 253, 0.98)',
  '#a487fb'
]
</script>

<style lang="scss" scoped>
.top-card {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
  .card {
    width: 20%;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 2px 2px 2px 2px #ccc;
    transition:
      box-shadow 0.5s,
      transform 0.5s;
    &:hover {
      transform: rotateX(15deg) scale(1.01);
      box-shadow: 4px 4px 4px 4px #ccc;
      cursor: pointer;
    }
    #top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 20px;
      border-bottom: 1px solid #fff;
      span {
        color: #fff;
      }
    }
    #bottom {
      color: #fff;
      padding: 15px 20px;
    }
  }
}
</style>
